<template>
  <div>
    <div class="chart">
      <template v-if="ringChartData.length > 0">
        <RingChart
          :data="ringChartData"
        >
          <template #tips>
            <div class="chart-title">
              <div class="title">
                <span class="count">{{ chartTitleOptions.title }}</span>
                <span class="unit">人</span>
              </div>
              <div class="sub-title">
                {{ chartTitleOptions.subTitle }}
              </div>
            </div>
          </template>
        </RingChart>

      </template>

      <template v-else>
        <div style="height: 200px;">
          <el-empty style="padding: 0" description="暂无用餐数据" />
        </div>
      </template>
    </div>

    <div class="card__footer">
      <div class="department">
        <div
          v-for="item in ringChartData"
          :key="item.id"
          class="department__item"
        >
          <div
            class="block"
            :style="{
              'background-color': item.color
            }"
          />
          <div class="value">{{ item.label }}：{{ item.value }}人</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import RingChart from '@/views/repast/components/RingChart.vue'

export default {
  name: '',
  components: { RingChart },
  props: {
    ringChartData: {
      type: Array,
      default: () => []
    },

    chartTitleOptions: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {

    }
  }
}
</script>
<style lang="scss">
@import "../style/index.scss";
</style>
